<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>易优名品</title>
    <link rel="stylesheet" href="__LayUI__/css/layui.css">
    <link rel="stylesheet" href="__Admin__/css/admin.scss">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    {include file="layout/head" /}

    {include file="layout/sidebar" /}

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div id="mainContain">
            <form method="POST" class="layui-col-xs4 layui-form" autocomplete="off">
                <input type="hidden" value="{$res.id}" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required=""  placeholder="请输入标题" autocomplete="off" class="layui-input" value="{$res.title}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="ON|OFF" {if condition="$res['status'] eq 1"}checked{/if}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户组权限</label>
                    <div class="layui-input-block">
                        <a id="add_rule" class="layui-btn layui-btn-normal" href="javascript:">配置权限</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" >立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <table id="table" class="layui-table" style="display: none;margin: 0">
                    {volist id="rules" name="rule"}
                    <tr>
                        <td width="80">

                            <!--{if condition="$vo['pic'] eq '' "} {}-->
                            <input  name="rules[]" class="parent_check" id="{$rules.class}" data-url="{$rules.id}" lay-skin="primary" type="checkbox" value="{$rules.id}" <?php
                             foreach($res['rules'] as $k => $v)
                            if($v==$rules['id']){
                            echo"checked";
                            }
                            ?>>
                        </td>
                        <td>{$rules.class}...{$rules.title}</td>
                    </tr>
                    {/volist}

                </table>
            </form>
        </div>
    </div>

    {include file="layout/footer" /}

</div>
<script src="__LayUI__/layui.js"></script>
<script src="__Admin__/js/jquery-3.3.1.js"></script>
<script>
    layui.use(["element","form","layer"], function(){

        var form = layui.form;

        $("#add_rule").click(function () {
            top.layer.open({
                type: 1,
                title:'权限配置',
                area: ['800px', '800px'],
                content: $('#table'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                success:function (layero) {
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(layero.parent());
                },
                btn: ['确定'],
                yes: function(index, layero){
                    //do something
                    //TODO;循环表格
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });
        });

        //全选，全不选
        form.on('checkbox()', function(data){
            var domId=$(data.elem).attr('id');//
            var id=$(data.elem).attr('data-url');//
            $("input[id^='"+ domId +"']").prop('checked',$(this).prop('checked'));
            // TODO 子元素点击，父元素联动


            while (domId.lastIndexOf('-')!=2){

                var state=$(this).prop('checked');

                domId=domId.substring(0,domId.lastIndexOf('-'));

                if($("input[id^='"+ domId +"']").length==2){  //判断没有兄弟元素
                    $("input[id='"+ domId +"']").prop('checked',$(this).prop('checked')) //父级和当前级别保持一致
                }else {
                    if(state){
                        $("input[id='"+ domId +"']").prop('checked',$(this).prop('checked')) //父级和当前级别保持一致
                    }
                }

//                domId=domId.substring(0,domId.lastIndexOf('-'));
//                var length=$("input[id^='"+ domId +"']").length
//
//                console.log(length);
//                parent=$('input[id="+ domId+"]');
//                if($("input[id^='"+ domId +"']").length==0){
//                    parent.prop('checked',false);
//                }

            }


            form.render();
        });

    });


</script>
</body>
</html>